<template>
  <div class="material-machine-bind">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card shadow="never">
      <el-row>
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
          style="width: 100%"
          stripe
          fit
          border
          tooltip-effect="dark"
        >

          <el-table-column
            :label="$t('index')"
            show-overflow-tooltip
            width="55"
            align="center">
            <template slot-scope="scope">
              <span >{{ (listQuery.page - 1) * listQuery.size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('toolingModel')"
            show-overflow-tooltip
            align="center"
            prop="toolingMode"/>
          <el-table-column
            :label="$t('toolingType')"
            show-overflow-tooltip
            align="center"
            prop="toolingType"/>
          <el-table-column
            :label="$t('total')"
            show-overflow-tooltip
            align="center"
            prop="allQty"/>
          <el-table-column
            :label="$t('passQty')"
            show-overflow-tooltip
            align="center">
            <el-table-column
              :label="$t('nums')"
              prop="allGoodQty"
              show-overflow-tooltip
              align="center"/>
            <el-table-column
              :label="$t('warehousesNums')"
              prop="stockQty"
              show-overflow-tooltip
              align="center"/>
            <el-table-column
              :label="$t('Online_quantity')"
              prop="lendQty"
              show-overflow-tooltip
              align="center"/>
          </el-table-column>
          <el-table-column
            :label="$t('total_scrap')"
            prop="scrapQty"
            show-overflow-tooltip
            align="center"/>
        </el-table>
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="onChangePage"
      />
    </el-card>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import { getIdAndToolingModelList } from '@/api/configSetting/toolingProductBingding'
import { getList } from '@/api/Tooling/toolingStock'
import { getToolingTypeIdList } from '@/api/Tooling/toolingType'
import loadingButton from '@/components/loading-button'
export default {
  name: 'ToolingStock',
  components: { loadingButton },
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: this.$t('toolingModel'), prop: 'toolingMode', tag: 'DynSelect' },
      { label: this.$t('toolingType'), prop: 'toolingType', tag: 'DynSelect' }
    ]
    return {
      infoForm: {},
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableLoading: true
    }
  },
  created() {
    this.initList()
    this.getEquipmentTypes()
    this.getToolingModelList()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      return this.initList()
    },
    // handleDelete() {
    //   this.$confirm(
    //     `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
    //       'recordCount'
    //     )}?`,
    //     this.$t('tip'),
    //     {
    //       confirmButtonText: this.$t('confirm'),
    //       cancelButtonText: this.$t('cancel'),
    //       type: 'warning'
    //     }
    //   ).then(() => {
    //     const ids = this.multipleSelection.map(ele => ele.id)
    //     doDelete({ ids }).then(res => {
    //       this.$betterTips(res, this.setOnePage, this.initList)
    //     })
    //   })
    // },
    onChangePage(page) {
      this.listQuery = page
      this.initList()
    },
    // 获取备件类型列表
    async getEquipmentTypes() {
      const res = await getToolingTypeIdList()
      this.$set(this.selectList, 'toolingType', res.data)
    },
    // 获取设备类型列表
    async getToolingModelList() {
      const res = await getIdAndToolingModelList()
      this.$set(this.selectList, 'toolingMode', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
